import React from 'react';
import './manage.css'
import { useState, useEffect } from "react";
import axios from 'axios'
import * as echarts from "echarts";
export default function App() {
    let [user, setuser] = useState()
    let [order, setorder] = useState()
    let [admin, setadmin] = useState()
    let [users, setusers] = useState()
    let [orders, setorders] = useState()
    let [admins, setadmins] = useState()
    let userPromise = []
    let orderPromise = []
    let adminPromise = []
    let days = []
    let date = new Date()
    let d = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate())
    days.unshift(d)
    for (let i = 0; i < 6; i++) {
        date.setDate(date.getDate() - 1)
        let d = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate())
        days.unshift(d)
    }
    useEffect(() => {
        axios.get('https://elm.cangdu.org/statis/user/' + d + '/count').then(res => {
            if (res.data.status == 1) {
                setuser(res.data.count)
            }
        })
        axios.get('https://elm.cangdu.org/v1/users/count').then(res => {
            if (res.data.status == 1) {
                setusers(res.data.count)
            }
        })
        axios.get('https://elm.cangdu.org/statis/order/' + d + '/count').then(res => {
            if (res.data.status == 1) {
                setorder(res.data.count)
            }
        })
        axios.get('https://elm.cangdu.org/bos/orders/count').then(res => {
            if (res.data.status == 1) {
                setorders(res.data.count)
            }
        })
        axios.get('https://elm.cangdu.org/statis/admin/' + d + '/count').then(res => {
            if (res.data.status == 1) {
                setadmin(res.data.count)
            }
        })
        axios.get('https://elm.cangdu.org/admin/count').then(res => {
            if (res.data.status == 1) {
                setadmins(res.data.count)
            }
        })
        days.forEach(i => {
            var puser = new Promise((resolve, reject) => {
                axios.get('https://elm.cangdu.org/statis/user/' + i + '/count').then(res => {
                    if (res.data.status == 1) {
                        resolve(res.data.count)
                    }
                }).catch((error) => {
                    reject(error)
                })
            })
            userPromise.push(puser)
            var porder = new Promise((resolve, reject) => {
                axios.get('https://elm.cangdu.org/statis/order/' + i + '/count').then(res => {
                    if (res.data.status == 1) {
                        resolve(res.data.count)
                    }
                }).catch((error) => {
                    reject(error)
                })
            })
            orderPromise.push(porder)
            var padmin = new Promise((resolve, reject) => {
                axios.get('https://elm.cangdu.org/statis/admin/' + i + '/count').then(res => {
                    if (res.data.status == 1) {
                        resolve(res.data.count)
                    }
                }).catch((error) => {
                    reject(error)
                })
            })
            adminPromise.push(padmin)
        })
        Promise.all([...userPromise, ...orderPromise, ...adminPromise]).then(res => {
            myChart.setOption({
                series: [
                    {
                        name: '新注册用户',
                        type: 'line',
                        stack: 'Total',
                        data: res.slice(0, 7)
                    },
                    {
                        name: '新增订单',
                        type: 'line',
                        stack: 'Total',
                        data: res.slice(7, 14)
                    },
                    {
                        name: '新增管理员',
                        type: 'line',
                        stack: 'Total',
                        data: res.slice(14)
                    },
                ]
            })
        })
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title: {
                text: '走势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新注册用户', '新增订单', '新增管理员']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: days
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新注册用户',
                    type: 'line',
                    stack: 'Total',
                    data: []
                },
                {
                    name: '新增订单',
                    type: 'line',
                    stack: 'Total',
                    data: []
                },
                {
                    name: '新增管理员',
                    type: 'line',
                    stack: 'Total',
                    data: []
                },
            ]
        });
    }, [])
    return <div>
        <header className="section_title">数据统计</header>
        <div className="el-row ele">
            <div className="el-col el-col-4">
                <div className="data_list today_head"><span className="data_num head">当日数据：</span></div>
            </div>
            <div className="el-col el-col-4">
                <div className="data_list"><span className="data_num">{user}</span> 新增用户</div>
            </div>
            <div className="el-col el-col-4">
                <div className="data_list"><span className="data_num">{order}</span> 新增订单</div>
            </div>
            <div className="el-col el-col-4">
                <div className="data_list"><span className="data_num">{admin}</span> 新增管理员</div>
            </div>
        </div>
        <div className="el-row el">
            <div className="el-col el-col-4">
                <div className="data_list all_head"><span className="data_num head">总数据：</span></div>
            </div>
            <div className="el-col el-col-4">
                <div className="data_list"><span className="data_num">{users}</span> 注册用户</div>
            </div>
            <div className="el-col el-col-4">
                <div className="data_list"><span className="data_num">{orders}</span> 订单</div>
            </div>
            <div className="el-col el-col-4">
                <div className="data_list"><span className="data_num">{admins}</span> 管理员</div>
            </div>
        </div>
        <div id="main"></div>
    </div>
}